<template>
	<view v-show="pageShow">
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<view class="title">托盘号</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="palletCode" :focus="focus[0]" @input="palletId = null;" @confirm="handleConfirmPallet"
						 placeholder="请扫描托盘号" />
						<image src="/static/scan.png" class="scan" @click="handleScanPallet" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmPallet" />
				</view>
			</view>
			<view class="uni-form-item">
				<view class="title">上架货位</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="goodsLocationCode" :focus="focus[1]" @input="goodsLocationId = null;" @confirm="handleConfirmGoodsLocation"
						 placeholder="请扫描上架货位" />
						<image src="/static/scan.png" class="scan" @click="handleScanGoodsLocation" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmGoodsLocation" />
				</view>
			</view>
			<view class="uni-btn-v">
				<button type="primary" form-type="submit">上架</button>
			</view>
		</form>
		<uni-popup ref="palletSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 2;">托盘号</view>
						<view class="td" style="flex: 2;">货品代码</view>
						<view class="td" style="flex: 2;">货品名称</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in palletList" :key="item.id" @click="handleSelectPallet(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="palletId === item.id" />
							</view>
							<view class="td" style="flex: 2;">{{item.code || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.goodsCode || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.goodsName || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="goodsLocationSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 2;">货位代码</view>
						<view class="td" style="flex: 2;">储区代码</view>
						<view class="td" style="flex: 2;">货位状态</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in goodsLocationList" :key="item.id" @click="handleSelectGoodsLocation(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="goodsLocationId === item.id" />
							</view>
							<view class="td" style="flex: 2;">{{item.code || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.storageAreaCode || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.stateLabel || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';

	export default {
		components: {
			uniCard
		},
		data() {
			return {
				pageShow: false,
				inBillId: null,
				focus: [true, false],
				cargoList: [],
				palletId: null,
				palletCode: null,
				palletList: [],
				goodsLocationId: null,
				goodsLocationCode: null,
				goodsLocationList: []
			}
		},
		onLoad(e) {
			this.inBillId = e.id;
			uni.showLoading({
				title: '加载中'
			});
			this.getCargoList(() => {
				this.pageShow = true;
				uni.hideLoading();
			}, () => uni.hideLoading());
		},
		methods: {
			handleScanPallet() {
				this.$scan(res => {
					this.palletCode = res;
					this.handleConfirmPallet();
				});
			},
			handleConfirmPallet() {
				let _cargoList = [...this.cargoList];
				if (this.palletCode) {
					_cargoList = _cargoList.filter(v => v.balletCode.toLowerCase().indexOf(this.palletCode.toLowerCase()) > -1);
				}
				this.palletList = _cargoList.map(v => {
					return {
						code: v.balletCode,
						goodsCode: v.goodsCode,
						goodsName: v.goodsName
					}
				});
				this.handleConfirmPalletCallback();
			},
			handleConfirmPalletCallback() {
				if (!this.palletList.length) {
					uni.showToast({
						title: '未匹配到托盘号',
						icon: 'none'
					});
					return;
				}
				if (this.palletList.length === 1) {
					const _pallet = this.palletList[0];
					this.handleSelectPallet(_pallet);
				} else {
					this.$refs.palletSelect.open();
				}
			},
			handleSelectPallet(pallet) {
				this.$api.common.palletList({
					page: 1,
					limit: 1,
					code: pallet.code
				}).then(res => {
					if (res.data.length) {
						this.palletId = res.data[0].id;
						this.palletCode = pallet.code;
						setTimeout(() => {
							this.$refs.palletSelect.close();
							this.palletList = [];
							this.handleFocus(1);
						}, 100);
					}
				});
			},
			handleScanGoodsLocation() {
				this.$scan(res => {
					this.goodsLocationCode = res;
					this.handleConfirmGoodsLocation();
				});
			},
			handleConfirmGoodsLocation() {
				this.$api.common.goodsLocationList({
					page: 1,
					limit: 100,
					query: this.goodsLocationCode,
					warehouseId: this.$storage.getWarehouseId()
				}).then(res => {
					this.goodsLocationList = res.data;
					if (!this.goodsLocationList.length) {
						uni.showToast({
							title: '未匹配到货位',
							icon: 'none'
						});
						return;
					}
					if (this.goodsLocationList.length === 1) {
						const _goodsLocation = this.goodsLocationList[0];
						this.handleSelectGoodsLocation(_goodsLocation);
					} else {
						this.$refs.goodsLocationSelect.open();
					}
				});
			},
			handleSelectGoodsLocation(goodsLocation) {
				this.goodsLocationId = goodsLocation.id;
				this.goodsLocationCode = goodsLocation.code;
				setTimeout(() => {
					this.$refs.goodsLocationSelect.close();
					this.goodsLocationList = [];
					this.handleFocus();
				}, 100);
			},
			handleFocus(index) {
				this.focus.map((v, i) => this.$set(this.focus, i, false));
				index && setTimeout(() => this.$set(this.focus, index, true), 300);
			},
			getCargoList(successCallback, errorCallback) {
				this.$api.upperCargo.cargoList({
					id: this.inBillId
				}).then(res => {
					this.cargoList = (res.data || []).filter(v => parseInt(v.receiveAmount) > parseInt(v.quantity));
					if (this.cargoList.length === 1) {
						const _goods = this.cargoList[0];
						this.handleSelectPallet({
							code: _goods.balletCode,
							goodsCode: _goods.goodsCode,
							goodsName: _goods.goodsName
						});
					}
					successCallback && successCallback instanceof Function && successCallback();
				}, () => errorCallback && errorCallback instanceof Function && errorCallback());
			},
			formSubmit(e) {
				if (!this.palletId) {
					if (this.palletCode) {
						return uni.showToast({
							title: '请扫描合法的托盘号',
							icon: 'none'
						});
					} else {
						return uni.showToast({
							title: '请扫描托盘号',
							icon: 'none'
						});
					}
				}
				if (!this.goodsLocationId) {
					if (this.goodsLocationCode) {
						return uni.showToast({
							title: '请扫描合法的上架货位',
							icon: 'none'
						});
					} else {
						return uni.showToast({
							title: '请扫描上架货位',
							icon: 'none'
						});
					}
				}
				uni.showLoading({
					title: '上架中'
				});
				const params = Object.assign({}, {
					inBillId: this.inBillId,
					palletId: this.palletId,
					goodLocationId: this.goodsLocationId
				});
				this.$api.upperCargo.palletUpperShelf(params).then(() => {
					global.$refresh = true;
					uni.hideLoading();
					uni.showToast({
						title: '上架成功',
						icon: 'success'
					});
					this.cargoList = this.cargoList.filter(v => v.balletCode !== this.palletCode);
					this.palletId = null;
					this.palletCode = null;
					this.palletList = [];
					this.goodsLocationId = null;
					this.goodsLocationCode = null;
					this.goodsLocationList = [];
					if (!this.cargoList.length) {
						setTimeout(() => {
							uni.showToast({
								title: '上架完成',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						}, 1000);
					} else if (this.cargoList.length === 1) {
						const _goods = this.cargoList[0];
						this.handleSelectPallet({
							code: _goods.balletCode,
							goodsCode: _goods.goodsCode,
							goodsName: _goods.goodsName
						});
					}
				}, () => uni.hideLoading());
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-form-item .title {
		width: 170rpx;
	}

	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}
</style>
